<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>RunJS 演示代码</title>
    <script>
        onload=function(){
            var sel=document.getElementById("sel");
            sel.children[1].selected=true;
            document.fm1.style.display="none";
            document.fm2.style.display="block";

            sel.onchange=function(){
                var op=this[this.selectedIndex].innerHTML.replace(/^\s+|\s+$/g,"");
                if(op=="卡劵号"){
                    document.fm1.style.display="block";
                    document.fm2.style.display="none";
                }else if(op=="物流单号"){
                    document.fm1.style.display="none";
                    document.fm2.style.display="block";
                }
            }
        }
    </script>
</head>
<body>
<div class="loge-s">
    <div class="loge-ss">
        <select id="sel" class="q1" style="color: #00a7d0;">
            <option selected>  卡劵号</option>
            <option>  物流单号</option>
        </select>
        <form name="fm1" action="inquire" method="post">
            {{csrf_field()}}
            <input type="text" name="c_account" placeholder="  输入卡劵号" class="q2"><br />
            <input type="submit" value="查询" class="q3">
        </form>
        <form name="fm2" action="inquire" method="post">
            {{csrf_field()}}
            <input type="text" name="tracking_number" placeholder="  输入快递单号" class="q2"><br />
            <input type="submit" value="查询" class="q3">
        </form>
    </div>
</div>
</body>
</html>{{--773057178146308--}}
<style>
    body,
    html{
        width: 100%;
        height: 100%;
    }
    /*头部*/
    .loge{
        width: 100%;
        height: 60px;
        float: left;
    }
    .loge img{
        float: left;
        margin-left: 30px;
    }
    .loge ul li{
        float: left;
        margin-left: 30px;
        list-style: none;
    }
    .loge ul li a{
        text-decoration: none;
        color: #0b2e13;
    }
    .loge1{
        float: right;
        margin-right: 20px;
    }
    .loge1 a{
        text-decoration: none;
        color: #0b2e13;
    }
    /*中间*/
    .loge-s{
        width: 100%;
        height: 600px;
        background: url("img/20200921-pc-1349X487.jpg")no-repeat center;
        float: left;
        margin-top: -65px;
    }
    .loge-ss{
        width: 200px;
        height: 100px;
        background-color: rgba(157,142,138,0.53);
        float: left;
        margin-left: 30%;
        margin-top: 70px;
    }
    .q1{
        width: 200px;
        height: 23px;
    }
    .q2{
        width: 195px;
        height: 23px;
        margin-top: 8px;
        border-radius: 5px;
        border: none;
        background-color: rgba(109,134,157,0.53);
        color: red;
    }
    .q3{
        margin-top: 20px;
        width: 100px;
        margin-left: 50px;
        border-radius: 5px;
        border: none;
    }
</style>
